import React, { Dispatch, SetStateAction, useEffect } from "react";
import clsx from "clsx";
import Button from "@/components/ui/Button/Button";
import styles from "./Modal.module.css";

type ModalProps = {
  modalOpen: boolean;
  setModalOpen: Dispatch<SetStateAction<boolean>>;
  setCurrentAuthForm?: Dispatch<SetStateAction<string>>;
  children: React.ReactNode;
  headText: string;
};

export default function Modal({ modalOpen, setModalOpen, headText, children, setCurrentAuthForm }: ModalProps) {
  useEffect(() => {
    setModalOpen(true);
  }, [setModalOpen]);

  return (
    <div className={clsx(styles.modalContainer, { [styles.showModal]: modalOpen })}>
      <div className={clsx(styles.modal, { [styles.scaleUpModal]: modalOpen })}>
        <div className={styles.modalHeader}>
          <Button type="button" kind="close" onClick={() => {
            if (setCurrentAuthForm) setCurrentAuthForm("none");
            setModalOpen(false);
          }} />
        </div>
        {headText && <h1 className={styles.headText}>{headText}</h1>}
        {children}
      </div>
    </div>
  );
}
